<template>
  <div>
    <el-button link @click="showDialog = true">选项关联</el-button>
    <drag-dialog v-model="showDialog" title="选项关联">
      <div>
        <span>根据选择的选项，显示其他控件。当前控件和上级选项不能被关联显示。</span>
        <el-table :data="data.dicData" border style="width: 100%">
          <el-table-column label="当选项为" width="200" align="center">
            <template #default="scope">
              {{ scope.row.label }}
            </template>
          </el-table-column>
          <el-table-column label="显示以下控件" align="center" min-width="200">
            <template #default="scope">
              <el-select style="width: 100%" v-model="scope.row.compsRef" multiple>
                <el-option v-for="(comp, index) in column" :key="index" :label="comp.fieldName" :value="comp.prop" :disabled="comp.optionDisabled" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <dialog-footer @ok="showDialog = false" @cancel="showDialog = false" />
      </template>
    </drag-dialog>
  </div>
</template>
<script>
import { findCompByProp, getCallableCompList } from '@code/components/anvil-code-low-common/utils/common-methods';

export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    dicData: {
      type: Array,
      default: () => []
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false
      // optionRef: [],
    };
  },
  computed: {
    column() {
      let filterComps = [];
      if (this.data.parentName) {
        const { prop, parentName } = this.data;
        const comps = [];
        findCompByProp(comps, parentName, this.formJson.column);
        if (comps && comps.length) {
          const { column } = comps[0].children;
          filterComps = column.filter((col) => col.prop !== prop);
        }
      } else {
        const comps = getCallableCompList(this.formJson);
        filterComps = comps.filter((option) => {
          return option.prop !== this.data.prop;
        });
      }
      return this.filterFields(filterComps);
    },
    dicts() {
      return this.dicData;
    }
  },
  watch: {
    dicData: {
      handler(newVal) {},
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 过滤不能被关联显示的组件
    filterFields(options) {
      return options.map((option) => {
        const { dicData } = option;
        if (dicData && dicData.length) {
          const disabled = dicData.find((item) => {
            const { compsRef } = item;
            if (compsRef && compsRef.length) {
              return compsRef.indexOf(this.data.prop) > -1;
            } else {
              return false;
            }
          })
            ? true
            : false;
          return {
            ...option,
            optionDisabled: disabled
          };
        } else {
          return {
            ...option,
            optionDisabled: false
          };
        }
      });
    }
  }
};
</script>
